<template>
   <el-dialog
      :visible.sync="visible"
      @close="$emit('update:dialogVisible', false)"
      @open= 'handleOpen'
      size='large'
      top='2vh'
      custom-class='leave-detail-dialog'
    >
     <div class='detail'>
    <section v-if='xiaojiaVisible && res.type !=="销"' @click.stop='goToXiaojia' class="return" style='margin-left:6px;display:inline-block'><a>我要销假</a></section>
    <section v-if='res.relate_id' @click.stop='goOther' class="return" style='display:inline-block'><a>查看该流程{{res.type=='请'?'销':'请'}}假申请</a></section>

    <section class="view">
       <div class="header">
         <span v-if='res.type == "请"'>假</span><span v-else>销</span>
         <span>{{res.name}}的{{res.type}}假申请</span>
         <span>{{res.deptname}}</span>
         <span class="right last">{{id}}</span>
         <span class="right">审批编号</span>
       </div>
       <div class="content">
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type}}假类型</span><span>{{res.leave_name}}<el-tooltip
						v-for='(k,i) in aTypeSelect'
						v-if='k.code_name == res.leave_name'
						:content='k.comment'
						popper-class='tooltip-300'
					>
					<i class="wenhao">?</i>
				</el-tooltip></span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type=="销"?"实际":""}}开始时间</span><span>{{res.start_time}}</span><span class='color-one'>{{res.Leave_st_section | ampm}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type=="销"?"实际":""}}结束时间</span><span>{{res.end_time}}</span><span class='color-one'>{{res.Leave_end_section | ampm}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>请假天数</span><span>{{res.leave_day}} 天</span></div>
         <div class="reason"><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type}}假事由</span><span>{{res.leave_reason}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>当前步骤</span><span :class="handleColor(res.audit_status_name)">{{res.audit_status_name}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one' style='margin-right:2px'>知会人&nbsp;&nbsp;&nbsp;</span><span v-if='zhihuiren'>{{zhihuiren}}</span><span v-else>无</span></div>

         <div>
           <span :class='{"span-width":res.type=="销"}' class='color-one'>附件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
           
           
           <div class="imgContainer" v-if='imgList.length'>
           	   <template v-for="(k,index) in imgList">
           	   			<img width="100px" @click="showLightBox(index)" :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token' alt="" />
           	   </template>
           </div>
           
           <a style='margin-left: 12px;' v-if='fileList.length'>
             <a 
             :href='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token'
              style='display:block' 
              class='color-third' 
              v-for='(k,i) in fileList'>
              <i :class="handleFileType(k.fileHz)"></i>
              <span>{{k.fileName}}</span>
             </a>
           </a>
           <p style='margin-left:14px' v-if='fileList.length === 0 && imgList.length === 0'>无</p>
         </div>    
       </div>

        <section class="steps">
         <div v-for='(k,i) in LogList' v-changeHeight class='steps-list'>

            <div class="date">{{k.loger_date.replace(/\//g,"-")}}&nbsp;&nbsp;&nbsp;{{k.loger_time}}</div>

            <div class="xian" :class='{ last:i == LogList.length - 1 }'>
              <span class="el-icon-circle-check" :class='{ok:k.loger_time}'></span>
            </div>

              
            <p class="people">
              <span>{{k.loger_oper}}</span>
              <span class="color-one">({{k.dept_descr}})</span>
              
            </p> 
            <div class="buzhou" :class='handleColor(k.oper_result_name)'> {{k.oper_result_name}}</div>
            <p class='message'>{{k.loger_info || ''}}</p>
            
          </div>
  

               
        </section>

       


    </section>
  </div>
  <light-box :selected.sync="selected" :imgUrlList="imgUrlList" :visiblable.sync="visiblable"></light-box>
  </div>

       
  </el-dialog>
</template>

<script>
import Vue from 'vue';
import { Message, MessageBox, Tooltip, Dialog } from 'element-ui';
import header from '@/components/employee/header';

Vue.use(Tooltip);
Vue.use(Dialog);

import lightBox from '@/components/employee/requestVacation/lightBox';

export default {
  components: {
    'v-header': header,
    'light-box': lightBox
  },
  props: {
    dialogVisible: {
      default: false
    },
    id: {
      defalut: ''
    }
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      this.visible = newValue;
    },
    id(newValue,oldValue) {
      this.myID = newValue
    }
  },
  computed: {
    res() {
      if (this.detailData) {
        if (this.detailData.busi_id.startsWith('XJ')) {
          this.detailData.type = '销';
        } else if (this.detailData.busi_id.startsWith('QJ')) {
          this.detailData.type = '请';
        }
        return this.detailData;
      } else {
        return [];
      }
    },
    buttonFlag() {
      if (this.status == 1) {
        return false;
      }
      return true;
    }
  },
  directives: {
    changeHeight: {
      inserted(el, binding, vnode) {
        let targetHeight, xian;
        targetHeight = el.querySelector('.message').offsetHeight;
        xian = el.querySelector('.xian');
        if (xian.className === 'xian') {
          xian.style.height = targetHeight + 'px';
        }
      }
    }
  },

  data() {
    return {
      visible: false,
      active: 2,
      type: null,
      status: null,
      detailData: null,
      textarea: null,
      fileList: [],
      token: null,
      params: null,
      userNameHeader: localStorage.getItem('userName'),
      LogList: [],
      nextPeople: null,
      selected: 0,
      visiblable: false,
      imgList: [],
      imgUrlList: [],
      aTypeSelect: [],
      myID:this.id,
      zhihuiren: [],
      xiaojiaVisible: false
    };
  },
  filters: {
    ampm: function(value) {
      if (value == '1') {
        return '上午';
      } else if (value == '2') {
        return '下午';
      }
    }
  },

  methods: {
    handleOpen() {
      this.params = {
        busi_id: this.myID,
        applyId: this.myID
      };

      this.getXiaojiaButton()

      this.token = localStorage.getItem('token');
      this.getDetail();
      this.getVacationDetail();
      this.getImg();
      this.getLog();
    },

    getLog() {
      this.Axios.Post(this.URL.getApprovedLogList.url, this.params).then(
        res => {
          this.LogList = res.data.datas;
        }
      );
    },

    getDetail() {
      this.Axios.Post(this.URL.examineBydetails.url, this.params).then(res => {
        let resData = res.data.datas;

        // this.xiaojiaVisible =
        //   resData.audit_status_name.indexOf('已备案') > -1 ? true : false;

        this.detailData = resData;
        this.nextPeople = resData.nextUserName;
        this.zhihuiren = resData.ZHR;
      });
    },

    getImg() {
      this.Axios.Post(this.URL.getFileListByBusiId.url, this.params).then(
        res => {
          this.imgList = [];
          this.imgUrlList = [];
          this.fileList = [];
          var resultList = res.data.datas;

          resultList.forEach((val, index, arr) => {
            if (this.handleFileType(val.fileHz) === 'img') {
              this.imgList.push(val);
              this.imgUrlList.push(
                this.Axios.baseURI +
                  '/' +
                  this.URL.downloadFile.url +
                  '?id=' +
                  val.id +
                  '&token=' +
                  this.token
              );
            } else {
              this.fileList.push(val);
            }
          });
        }
      );
    },
    goOther() {
      this.myID = this.res.relate_id;
      this.handleOpen();
    },
    getXiaojiaButton() {
      let params = {
        busiId: this.params.applyId
      };

      this.Axios.Post(this.URL.ishow.url, params).then(res => {
        this.xiaojiaVisible = parseInt(res.data.datas);
      });
    },

    goToXiaojia() {
      localStorage.setItem('busiID', this.params.applyId);
      window.open('#/myBackout');
    },
    showLightBox(index) {
      this.visiblable = false;
      if (!index) {
        Vue.nextTick(() => {
          this.visiblable = true;
        });
      }
      this.selected = index;
    },

    handleColor(str) {
      switch (str) {
        case '已审批':
          return 'pass';
          break;
        case '已备案':
          return 'pass';
          break;
        case '已同意':
          return 'pass';
          break;
        case '已驳回':
          return 'nook';
          break;
        case '已拒绝':
          return 'nook';
          break;
        default:
          return 'checking';
          break;
      }
    },

    handleFileType(name) {
      let type = name && name.split('.')[1];
      if (
        type == 'jpg' ||
        type == 'jpeg' ||
        type == 'png' ||
        type == 'svg' ||
        type == 'gif' ||
        type == 'bmp'
      ) {
        return 'img';
      } else if (type == 'doc' || type == 'docx') {
        return 'word';
      } else if (type == 'xls' || type == 'xlsx') {
        return 'excel';
      } else {
        return 'file';
      }
    },

    getVacationDetail() {
      this.Axios.Post(this.URL.getLeaveInstruction.url).then(res => {
        let datas = res.data.datas;
        this.aTypeSelect = datas;
      });
    }
  }
};
</script>

<style lang='less'>
.leave-detail-dialog.el-dialog--large {
  width: 70%;
  .el-dialog__body {
    padding: 0;
    padding-bottom: 40px;
  }
}

.reason {
  overflow: hidden;
  span {
    float: left;
  }
  span:last-of-type {
    max-width: 90%;
    white-space: wrap;
    overflow: hidden;
    word-wrap: break-word;
  }
}
.detail {
  width: 80%;
  margin: 0 auto;

  .pass {
    color: #339966;
  }

  .nook {
    color: #c7254e;
  }

  .checking {
    color: #38f;
  }

  .color-one {
    color: #999;
  }
  .color-two {
    color: #38f;
  }
  .color-third {
    color: #3c8dbc;
  }
  .return {
    color: #38f;
    cursor: pointer;
    border: 1px solid #38f;
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
  }

  .return.select {
    color: #fff !important;
    background-color: #38f !important;
  }

  .view {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    .header {
      background-color: #3c8dbc;
      padding: 10px 10px 8px 20px;
      font-size: 15px;
      overflow: hidden;
      > span {
        color: #fff;
        margin-left: 10px;
      }
      > span:first-of-type {
        margin-left: 0;
        color: #38f;
        background-color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
      }
      > span.right {
        float: right;
      }
      > span.right.last {
        position: relative;
        top: 2px;
      }
    }

    .content {
      padding: 16px 58px 40px 58px;
      position: relative;
      .span-width {
        width: 90px;
        display: inline-block;
      }
      a {
        cursor: pointer;
        span {
          position: relative;
          top: -4px;
        }
      }

      .word,
      .excel,
      .img,
      .file {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/ 100% 100%;
        margin: 0 8px 0 2px;
      }

      .word {
        background-image: url(../../../../../static/images/word.svg);
      }

      .excel {
        background-image: url(../../../../../static/images/excel.svg);
      }

      .img {
        background-image: url(../../../../../static/images/img.svg);
      }

      .file {
        background-image: url(../../../../../static/images/file.svg);
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: #ecf0f5;
        height: 1px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
      }

      & > div {
        margin: 6px 0;
        i.wenhao {
          font-style: normal;
          background-color: #89abc6;
          color: #fff;
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          margin-left: 3px;
          font-size: 12px;
          cursor: pointer;
        }

        & > span:nth-of-type(n + 2) {
          margin-left: 14px;
        }
      }

      & > div:last-of-type {
        overflow: hidden;
        & > p {
          float: left;
          margin-bottom: 4px;
        }

        & > a {
          float: left;
        }

        & > span {
          float: left;
        }
      }
    }

    .steps {
      padding: 0px 0 20px 16px;
      // max-height: 160px;
      // overflow: auto;
      .steps-list {
        & > div,
        & > p {
          display: inline-block;
          vertical-align: top;
        }

        .date {
          min-width: 137px;
        }

        .people {
          width: 20%;
        }

        .message {
          word-wrap: break-word;
          white-space: wrap;
          max-width: 400px;
          padding-bottom: 20px;
        }

        .buzhou {
          margin-left: 30px;
          width: 8%;
        }
        .pass {
          color: #339966;
        }

        .nook {
          color: #c7254e;
        }

        .checking {
          color: #38f;
        }

        .xian {
          border-right: 1px dashed #999;
          width: 1px;
          min-height: 60px;
          margin: 0 30px;
          > span {
            transform: translateX(-50%) scale(1.3);
            background-color: #fff;
            color: #999;
          }
          > span.ok {
            color: #38f;
          }
        }

        .xian.last {
          height: 0;
          min-height: 0;
          & > span {
            top: 4px;
          }
        }
      }
    }

    .deside {
      margin: 60px 0px 20px 10px;
      text-align: left;
      > a {
        color: #38f;
        cursor: pointer;
        border: 1px solid #38f;
        padding: 6px 15px;
        border-radius: 15px;
        margin: 0 2px;
      }
    }
  }

  .text-area {
    width: 60%;
    margin: 30px 12px;
    .submit {
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
</style>

<style lang='less'>
body .tooltip-300 {
  max-width: 300px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}

.imgContainer img {
  display: inline-block;
  margin-left: 14px;
  max-height: 80px;
}
</style>
